<template>
  <div class="history">
    <div class="top">
      <img src="../../assets/images/qr.png" alt="" @click="goback" />
      <p>{{ $t("common.qianbaoli") }}</p>
    </div>
    <div class="banner">
      <img
        src="../../assets/images/lh1.png"
        alt=""
        class="signa"
        @click="showPopup"
      />
      <van-tabs v-model="active">
        <van-tab :title="$t('common.chongzhi')">
          <van-list
          v-model="loading"
            :finished="finished"
            :finished-text="$t('long.meiyougengduo')"
            @load="getList"
            :immediate-check="false"
          >
            <div
              class="content"
              v-for="item in rechargeList"
              :key="item.id"
              @click="details_cz(item)"
            >
              <div class="contenta">
                <p>{{ user_fund_recharge_types(item.type) }}-USDT</p>
                <p class="contentp">{{ item.quantity }}</p>
              </div>
              <div class="contentb">
                <p class="contentp">{{ item.createTime }}</p>

                <p><span></span>{{ filterState(item.state) }}</p>
              </div>
            </div>
          </van-list>
          <van-popup
            v-model="showtime"
            position="bottom"
            :style="{ height: '40%' }"
          >
            <van-datetime-picker
              v-model="currentDate"
              type="date"
              :title="$t('long.xznianyueri')"
              :min-date="minDate"
              :max-date="maxDate"
              @confirm="confirm"
              @cancel="cancel"
              :formatter="formatter"
            />
          </van-popup>
        </van-tab>
        <van-tab :title="$t('common.tixian')">
          <van-list
            v-model="loading"
            :finished="finished"
            :finished-text="$t('long.meiyougengduo')"
            @load="getList"
            :immediate-check="false"
          >
            <div class="content1" v-for="item in withdrawList" :key="item.id">
              <div class="contenta" @click="details_tx(item)">
                <p>USDT</p>
                <p class="contentp">{{ item.quantity }}</p>
              </div>
              <div class="contentb">
                <p class="contentp">{{ item.createTime }}</p>

                <p><span></span>{{ filterState2(item.state) }}</p>
              </div>
            </div>
          </van-list>
          <van-popup
            v-model="showtimetwo"
            position="bottom"
            :style="{ height: '40%' }"
          >
            <van-datetime-picker
              v-model="currentDate"
              type="date"
              :title="$t('long.xznianyueri')"
              :min-date="minDate"
              :max-date="maxDate"
              @confirm="confirmtwo"
              @cancel="canceltwo"
              :formatter="formatter"
            />
          </van-popup>
        </van-tab>
      </van-tabs>
    </div>
    <van-popup v-model="show" position="bottom" closeable>
      <div class="div1">
        <p>{{ $t("common.shaixuan") }}</p>
      </div>
      <div class="div2">
        <p>{{ $t("common.zhuangtai") }}</p>
      </div>
      <div class="div3">
        <button
          v-for="(item, index) in items"
          :key="index"
          @click="change(index)"
          :class="{ active: index === number }"
        >
          {{ item.name }}
        </button>
      </div>
      <div class="div2" v-if="shaixuanleixing">
        <p>{{ $t("common.leixing") }}：</p>
      </div>
      <div class="div3" v-if="shaixuanleixing">
        <button
          v-for="(item, index) in items1"
          :key="index"
          @click="change1(index)"
          :class="{ active: index === number1 }"
        >
          {{ item.name }}
        </button>
      </div>
      <div class="div2">
        <p>{{ $t("common.shijian") }}</p>
      </div>
      <div class="div4">
        <div
          class="left"
          @click="showTime(1)"
          :style="{
            color: index1 == 1 ? 'rgba(135, 139, 151, 100)' : '#fff',
          }"
        >
          {{ time1 || this.$t("common.qingxuanzhe") }}
        </div>
        <p>{{ $t("common.dao") }}</p>
        <div
          class="right"
          @click="showTime(2)"
          :style="{
            color: index2 == 1 ? 'rgba(135, 139, 151, 100)' : '#fff',
          }"
        >
          {{ time2 || this.$t("common.qingxuanzhe") }}
        </div>
      </div>
      <div class="div5">
        <van-button type="info" class="button" @click="Reset">{{
          $t("common.chong")
        }}</van-button>
        <van-button
          type="info"
          class="button"
          :style="{ background, border }"
          @click="confirmQuery"
          >{{ $t("common.queren") }}</van-button
        >
      </div>
    </van-popup>
    <van-popup v-model="show2" position="bottom" closeable>
      <div class="div1">
        <p>{{ $t("common.shaixuan") }}</p>
      </div>
      <div class="div2">
        <p>{{ $t("common.zhuangtai") }}</p>
      </div>
      <div class="div3">
        <button
          v-for="(item, indextwo) in item2"
          :key="indextwo"
          @click="changetwo(item)"
          :class="{ active: item.name == numbertwo }"
        >
          {{ item.name }}
        </button>
      </div>
      <div class="div2">
        <p>{{ $t("common.shijian") }}</p>
      </div>
      <div class="div4">
        <div
          class="left"
          @click="showTimetwo(1)"
          :style="{
            color: indextwo1 == 1 ? 'rgba(135, 139, 151, 100)' : '#fff',
          }"
        >
          {{ timetwo1 || this.$t("common.qingxuanzhe") }}
        </div>
        <p>{{ $t("common.dao") }}</p>
        <div
          class="right"
          @click="showTimetwo(2)"
          :style="{
            color: indextwo2 == 1 ? 'rgba(135, 139, 151, 100)' : '#fff',
          }"
        >
          {{ timetwo2 || this.$t("common.qingxuanzhe") }}
        </div>
      </div>
      <div class="div5">
        <van-button type="info" class="button" @click="Resettwo">{{
          $t("common.chong")
        }}</van-button>
        <van-button
          @click="confirmQuery"
          type="info"
          class="button"
          :style="{ background, border }"
          >{{ $t("common.queren") }}</van-button
        >
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      finished: false,
      stateList: [],
      stateList2: [],
      user_fund_recharge_type: [],
      rechargeList: [],
      withdrawList: [],
      page: 1,
      pageSize: 100,
      active: 0,
      show: false,
      show2: false,
      // showNo: false,
      // chongzhi: this.$t('common.chongzhi'),
      // tixian: this.$t('common.tixian'),
      // qingxuanzhe: this.$t('common.qingxuanzhe'),
      showtime: false,
      showtimetwo: false,
      time1: "",
      time2: "",
      timetwo1: "",
      timetwo2: "",
      index1: 1,
      index2: 1,
      indextwo1: 1,
      indextwo2: 1,
      minDate: new Date(2016, 0, 1),
      maxDate: new Date(),
      currentDate: new Date(2022, 3, 15),
      number: 0,
      number1: 0,
      number2: null,
      // number3: null,
      shaixuanleixing: true,
      numbertwo: "全部",
      border: "1px solid rgba(10, 122, 255, 100)",
      background: " rgba(10, 122, 255, 100)",
      aa: 1,
      bb: 1,
      items: [],
      item2: [],
      items1: [],
      // item2: [{ name: this.$t('common.quanbu') }, { name: this.$t('common.shenhe') }, { name: this.$t('common.tixianzhong') },{ name: this.$t('common.yiwancheng') },{ name: this.$t('common.yishibai') },{ name: this.$t('common.yishibai') }]
    };
  },
  async activated() {
    // if(this.rechargeList.length == 0){
    //   this.showNo = true
    // }else{
    //   this.showNo = false
    // }

    this.active = localStorage.getItem("ls") - 0;
    localStorage.setItem("ls", 0);
    this.stateList = await this.$getDict("recharge_state");
    this.stateList2 = await this.$getDict("withdrawal_state");
    this.user_fund_recharge_type = await this.$getDict(
      "user_fund_recharge_type"
    );
    this.items = this.stateList.map((v) => ({
      name: v.description,
    }));
    this.items.unshift(this.items.pop());
    this.item2 = this.stateList2.map((v) => ({
      name: v.description,
    }));
    this.items1 = this.user_fund_recharge_type.map((v) => ({
      name: v.description,
    }));
    console.log(this.items1);
    this.items1.unshift({ name: this.$t("common.quanbu") });
    this.page = 1
    this.getList()
  },
  watch: {
    active(val) {
      this.Reset();
    },
  },
  mounted() {
    /**
     * 特殊需求：选择日期的最大日期、最小日期；默认选中当天的日期
     * 日期的最小值可以自定义，
     * 但是日期的最大值 就是 默认选中当天的日期
     */
    // 自定义日期的最小值
    var time1 = 2010;
    var time2 = 1;
    var time3 = 1;
    this.minDate = new Date(time1, time2, time3);
  },
  methods: {
    confirmQuery() {
      this.page = 1;
      this.show = false;
      this.show2 = false;

      this.getList();
    },
    filterState2(val) {
      return (
        this.stateList2.length &&
        this.stateList2.find((v) => v.value == val).description
      );
    },
    filterState(val) {
      return (
        this.stateList.length &&
        this.stateList.find((v) => v.value == val).description
      );
    },
    user_fund_recharge_types(val) {
      return (
        this.user_fund_recharge_type.length &&
        this.user_fund_recharge_type.find((v) => v.value == val).description
      );
    },
    async getList() {
      if (this.active == 0) {
        console.log(this.number1);
        // this.number3 = null
        // if(this.active == 0 && this.number1 === 0){
        //   this.number3 = ['0','2']
        // }
        this.number2 = null;
        if (this.number1 == 0) {
          this.number2 = null;
        } else {
          this.number2 = this.number1 - 1;
        }
        // if(this.active == 2){
        //   this.number2 = 5
        //   this.shaixuanleixing  = false
        // }else if(this.active == 3){
        //   this.number2 = 1
        //   this.shaixuanleixing  = false
        // }else{
        //   this.shaixuanleixing  = true
        // }
        this.loading = true;
        // console.log(this.number2)
        const ret = await this.$http({
          url: "/wallet/rechargerecord/app/page",
          method: "post",
          data: {
            page: {
              current: this.page,
              size: this.pageSize,
            },
            rechargeRecord: {
              state: this.number,
              type: this.number2,
              // typeList: this.number3,
              startTime: this.time1,
              endTime: this.time2,
            },
          },
        });
        if (ret.data.code === 0) {
          //
          this.loading = false;
          if (this.page == 1) {
            this.rechargeList = ret.data.data.records || [];
          } else {
            this.rechargeList = this.rechargeList.concat(
              ret.data.data.records || []
            );
          }
          this.page++;
          if (this.rechargeList.length >= +ret.data.data.total) {
            this.finished = true;
          }
        }
      } else {
        this.loading = true;
        let state = !this.stateList2.length
          ? "0"
          : this.stateList2.find((v) => v.description == this.numbertwo).value;
        const ret = await this.$http({
          url: "/wallet/withdrawalrecord/app/page",
          method: "get",
          params: {
            current: this.page,
            size: this.pageSize,
            state,
            startTime: this.timetwo1,
            endTime: this.timetwo2,
          },
        });
        if (ret.data.code === 0) {
          //
          this.loading = false;
          if (this.page == 1) {
            this.withdrawList = ret.data.data.records || [];
          } else {
            this.withdrawList = this.withdrawList.concat(
              ret.data.data.records || []
            );
          }
          this.page++;
          if (this.withdrawList.length >= +ret.data.data.total) {
            this.finished = true;
          }
        }
      }
    },
    details_cz(item) {
      console.log(item.createTime);
      this.$router.push({
        path: "/details_cz",
        query: {
          zid: item.id,
        },
      });
    },
    details_tx(item) {
      this.$router.push({
        path: "/details_tx",
        query: {
          zid: item.id,
        },
      });
    },
    showPopup() {
      if (this.active === 0) {
        this.show = true;
      } else {
        this.show2 = true;
      }
    },
    change: function (index) {
      this.number = index;
    },
    change1: function (index) {
      this.number1 = index;
    },
    changetwo: function (item) {
      this.numbertwo = item.name;
    },
    goback() {
      this.$router.go("-1");
    },
    Reset() {
      this.page = 1;
      this.number = 0;
      this.number1 = 0;
      this.number2 = null;
      this.time1 = "";
      this.time2 = "";
      this.show = false;
      this.getList();
    },
    Resettwo() {
      this.page = 1;
      this.numbertwo = "全部";
      this.timetwo1 = "";
      this.timetwo2 = "";
      this.show2 = false;
      this.getList();
    },
    formatter(type, value) {
      if (type === "year") {
        this.value1 = value; // 可以拿到当前点击的数值
        return `${value}`;
      } else if (type === "month") {
        this.value2 = value;
        return `${value}`;
      }
      this.value3 = value;
      return `${value}`;
    },
    showTime(val) {
      this.showtime = true;
      this.aa = val;
    },
    showTimetwo(val) {
      this.showtimetwo = true;
      this.bb = val;
    },
    confirm() {
      var selectTime = `${this.value1}-${this.value2}-${this.value3}`;
      if (this.aa == 1) {
        this.time1 = selectTime;
        this.index1 = 2;
      } else {
        this.time2 = selectTime;
        this.index2 = 2;
      }
      this.showtime = false;
    },
    confirmtwo() {
      var selectTime = `${this.value1}-${this.value2}-${this.value3}`;
      if (this.bb == 1) {
        this.timetwo1 = selectTime;
        this.indextwo1 = 2;
      } else {
        this.timetwo2 = selectTime;
        this.indextwo2 = 2;
      }
      this.showtimetwo = false;
    },
    cancel() {
      this.showtime = false;
    },
    canceltwo() {
      this.showtimetwo = false;
    },
  },
};
</script>

<style scoped lang="scss">
.history {
  .top {
    width: 100vw;
    height: 11.73vw;
    background-color: #090A1B;
    color: rgba(255, 255, 255, 100);
    font-size: 4.8vw;
    //font-family: Microsoft Yahei;
    p {
      position: relative;
      bottom: 3.2vw;
    }
    img {
      position: relative;
      right: 44.8vw;
      top: 3.2vw;
      width: 5.3vw;
      height: 5.3vw;
      z-index: 100;
    }
  }
  .banner {
    // height: 204.8vw;
    min-height: 100vh;
    position: relative;
    background-color: #090A1B;
    .signa {
      position: absolute;
      top: 3vw;
      right: 3vw;
      width: 4.8vw;
      z-index: 99;
    }
    .content {
      // height: 20.53vw;
      text-align: left;
      .contenta {
        height: 9.93vw;
        display: flex;
        justify-content: space-between;
        padding: 0 3.46vw;
        p {
          position: relative;
          top: 4.8vw;
          color: rgba(214, 214, 214, 100);
          font-size: 3.73vw;
          font-family: PingFangSC-regular;
        }
        .contentp {
          font-weight: 600;
        }
      }
      .contentb {
        height: 9.6vw;
        display: flex;
        justify-content: space-between;
        padding: 0 3.46vw;
        span {
          display: inline-block;
          width: 0.8vw;
          height: 0.8vw;
          background-color: rgba(94, 186, 137, 100);
          position: relative;
          top: -0.8vw;
          left: -1vw;
        }
        p {
          position: relative;
          top: 2.13vw;
          color: rgba(135, 139, 151, 100);
          font-size: 3.2vw;
        }
      }

      .index {
        z-index: 10;
      }
    }
    .bottom {
      height: 5.3vw;
      text-align: center;
      line-height: 5.3vw;
      color: rgba(135, 139, 151, 100);
      font-size: 3.73vw;
      font-family: PingFangSC-regular;
      background-color: #090A1B;
    }
    .content1 {
      height: 20.53vw;
      text-align: left;
      .contenta {
        height: 10.93vw;
        display: flex;
        justify-content: space-between;
        padding: 0 3.46vw;
        p {
          position: relative;
          top: 4.8vw;
          color: rgba(214, 214, 214, 100);
          font-size: 3.73vw;
          font-family: PingFangSC-regular;
        }
      }
      .contentb {
        height: 9.6vw;
        display: flex;
        justify-content: space-between;
        padding: 0 3.46vw;
        span {
          display: inline-block;
          width: 0.8vw;
          height: 0.8vw;
          background-color: rgba(94, 186, 137, 100);
          position: relative;
          top: -0.8vw;
          left: -1vw;
        }
        p {
          position: relative;
          top: 2.13vw;
          color: rgba(135, 139, 151, 100);
          font-size: 3.2vw;
        }
      }
    }
    :deep(.van-list) {
      background-color: #090A1B;
    }
    // .noMessage{
    //   height: 192.6vw;
    //   img{
    //     width: 17.33vw;
    //     height: 17.33vw;
    //     margin-top: 13.6vw
    //   }
    //   p{
    //     color: rgba(79, 82, 93, 100);
    //     font-size: 3.2vw;
    //     margin-top: 1.06vw;
    //   }
    // }

    ::v-deep .van-tab {
      color: rgba(135, 139, 151, 100);
      margin-right: 5.3vw;
      flex: none;
    }
    ::v-deep .van-tabs__nav--line {
      width: 45.93vw;
      background-color: #090A1B;
    }
    ::v-deep .van-tabs__line {
      width: 3.73vw;
      background-color: #0a7aff;
    }
    ::v-deep .van-tabs--line .van-tabs__wrap {
      padding-left: 4.4vw;
      background-color: #090A1B;
      border-bottom: 1px solid rgba(51, 53, 64, 100);
    }
    ::v-deep .van-tab--active {
      color: rgba(255, 255, 255, 100);
    }
  }
  ::v-deep .van-overlay {
    background-color: rgba(0, 0, 0, 0.3);
  }
  .van-picker {
    background-color: #090A1B;
  }
  ::v-deep .van-picker__mask {
    background-image: inherit;
  }
  .van-popup {
    background-color: #090A1B;
  }
  ::v-deep .van-picker-column__item {
    color: #8992AE;
  }
  ::v-deep .van-picker-column__item--selected {
    color: #fff;
  }
  ::v-deep .van-picker__confirm {
    color: #0a7aff;
  }
}
.div1 {
  height: 18.93vw;
  p {
    width: 9.3vw;
    height: 5.8vw;
    color: rgba(255, 255, 255, 100);
    font-size: 4.2vw;
    text-align: left;
    font-family: PingFangSC-regular;
    position: relative;
    top: 4.5vw;
    left: 45.6vw;
    letter-spacing: 0.32vw;
  }
}
.div2 {
  height: 7.4vw;
  width: 91.46vw;
  margin-left: 4vw;
  border-bottom: 1px solid rgba(51, 53, 64, 100);
  p {
    width: 11.46vw;
    height: 5.3vw;
    color: rgba(135, 139, 151, 100);
    font-size: 3.7vw;
    text-align: left;
    font-family: PingFangSC-regular;
  }
}
.div3 {
  height: 24.26vw;
  width: 91.46vw;
  text-align: left;
  margin-left: 4vw;

  button {
    height: 5.6vw;
    line-height: 5.3vw;
    border-radius: 0.8vw;
    text-align: center;
    margin-top: 4.2vw;
    font-size: 3.2vw;
    margin-right: 5.7vw;
    background-color: rgba(51, 53, 64, 100);
    border-width: 0;
    color: rgba(135, 139, 151, 100);
    padding: 0px 6px;
  }
  .active {
    color: rgba(255, 255, 255, 100);
  }
}
.div4 {
  height: 12.8vw;
  display: flex;
  .left {
    width: 41.86vw;
    height: 8.53vw;
    line-height: 8.5vw;
    border-radius: 0.8vw;
    background-color: rgba(51, 53, 64, 100);
    text-align: center;
    margin-left: 4vw;
    margin-top: 4.26vw;
    letter-spacing: 0.2vw;
  }
  p {
    width: 3.46vw;
    height: 4.53vw;
    color: rgba(135, 139, 151, 100);
    font-size: 3.2vw;
    text-align: left;
    font-family: PingFangSC-regular;
    margin: 6.4vw 2.1vw 0 2.1vw;
  }
  .right {
    width: 41.86vw;
    height: 8.5vw;
    line-height: 8.5vw;
    border-radius: 0.8vw;
    background-color: rgba(51, 53, 64, 100);
    text-align: center;
    margin-top: 4.2vw;
    letter-spacing: 0.2vw;
  }
}
.div5 {
  height: 28vw;
  display: flex;
  justify-content: space-between;
  margin: 0 4vw;
  .button {
    width: 44.2vw;
    height: 9.6vw;
    line-height: 9.6vw;
    border-radius: 0.8vw;
    background-color: rgba(51, 53, 64, 100);
    border: 1px solid rgba(51, 53, 64, 100);
    text-align: center;
    margin-top: 11.2vw;
    font-size: 3.7vw;
    font-family: PingFangSC-regular;
  }
  .bgcolor {
    background-color: rgba(10, 122, 255, 100);
  }
}
</style>